<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>Bootstrap表单</title>
    <!-- bootstrap垂直表单是boostrap的默认表单布局 -->
</head>
<body>
    <!-- form标签用于创建一个表单 -->
    <!-- action属性用于指定表单要提交给谁 -->
    <!-- method用于指定表单提交的方法，一般用get和post两个方法 -->
    <!-- get方法提交的参数会拼接再URL后面，比较危险。有数据量的限制，不能提交文件 -->
    <!-- post方法会隐藏参数，没有数据量限制，可以提交文件 -->
    <form action="login.jsp" method="post">
        <!-- form-group是bootstrap用于明确语义，并添加一定边距的类 -->
        <div class="form-group">
        <!-- label一般用来添加提示性的文字 -->
        <label for="username">用户名</label>
        <!-- input标签可以实现大部分表单控件比如文本框，密码框，日期选择等等.... -->
        <!-- type属性决定input标签的类型，这里的text指定input是一个普通的文本框 -->
        <!-- name属性决定表单提交时当前输入框的参数名字 -->
        <!-- id给当前控件一个唯一的标识符 -->
        <!-- placeholder表示占位符，可以在输入框显示一些提示性文字 -->
        <!-- required指定当前控件是一个必填项，如果不填无法提交表单 -->
        <!-- .form-control指定当前控件为bootstrap控件，并应用bootstrap的样式 -->
        <input type="text" name="username" id="username" placeholder="邮箱或者id" required class="form-control">
    </div>

    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" name="password" id="password" class="form-control" required>
    </div>
    <div class="checkbox">
        <label > <input type="checkbox">记住我</label>
    </div>
    <!-- type="submit"可以创建一个提交按钮，点击就会提交表单，.btn应用bootstrap按钮的样式 .btn-primary将按钮设置为蓝色-->
    <input type="submit" value="登录" class="btn btn-primary">
    </form>
</body>
</html>